<template>
  <div class="time-range-buttons">
    <el-button
        v-for="item in timeTypes"
        :key="item.type"
        class="screen-btn"
        size="small"
        :class="{ active: activeType === item.type }"
        @click="handleClick(item.type)"
    >
      {{ item.label }}
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'TimeRangeButtons',
  props: {
    // 接收父组件传递的默认选中类型
    defaultType: {
      type: String,
      default: 'today'
    },
    // 支持自定义时间类型列表（默认包含5个常用类型）
    timeTypes: {
      type: Array,
      default: () => [
        { type: 'today', label: '今日' },
        { type: 'week', label: '本周' },
        { type: 'month', label: '本月' },
        { type: 'quarter', label: '本季' },
        { type: 'year', label: '本年' }
      ]
    }
  },
  data() {
    return {
      activeType: this.defaultType // 维护选中状态
    }
  },
  methods: {
    // 点击按钮时，更新选中状态并通知父组件
    handleClick(type) {
      this.activeType = type
      this.$emit('change', type) // 将选中的时间类型传递给父组件
    }
  }
}
</script>

<style lang="scss" scoped>
.time-range-buttons {
  display: inline-flex;
  gap: 8px; // 按钮间距
  .el-button {
    &.active {
      // 选中状态样式（可根据实际需求调整）
      background-color: #409eff;
      color: #fff;
      border-color: #409eff;
    }
  }
}
</style>
